<template>
	<view class="wrapper">
		<u-navbar :title="$t('recruit.JobDetails')" @rightClick="rightClick" :autoBack="true" bgColor="#61BDB2"
			leftIconColor="#ffffff" titleStyle="color: #ffffff" placeholder>
		</u-navbar>
		<view class="container">
			<view class="content">
				<view class="content__info">
					<view class="content__info__header">
						<view>{{ recruitmentData.position }}</view>
						<view v-if="recruitmentData.salary === null">
							<text class="thin-text">{{ $t("recruit.from") }}</text>
							<text class="deep-text">
								{{ getCoinName(recruitmentData.currencyId) }}{{ parseFloat(recruitmentData.salaryMoney) }}</text>
						</view>
						<view class="" v-else>
							<text class="deep-text">{{ $t("recruit.Negotiable") }}</text>
						</view>
					</view>
					<view class="content__info__center">
						<view class="">
							<view class="iconfont icon-weizhi-1 my-icon"> </view>
							<view class="place">
								{{ formatPlace(recruitmentData.workPlace) }}
							</view>
						</view>
						<view class="">
							<view class="iconfont icon-a-qunren my-icon"> </view>
							<view class="place">
								{{$t("recruit.Recruitpeople", {
									num: recruitmentData.recruitingNumbers,
									})
								}}
							</view>
						</view>
					</view>
					<view class="content__info__bottom">
						<view class="tags-item">
							{{ jobNatureStr(recruitmentData.jobNature) }}
						</view>
						<view class="tags-item">
							{{ workingModeStr(recruitmentData.workingMode) }}
						</view>
						<view class="tags-item">
							{{ workExperienceStr(recruitmentData.workExperience) }}
						</view>
					</view>
					<view class="content__info__extra" v-if="recruitmentData.allowReferrals !== 0">
						<i class="iconfont icon-tuijian extra-icon"></i>
						<text>
							{{ $t("recruit.allowReferrals") }}:
						</text>
						<text style="margin-right: 8rpx;"></text>
						<text>{{recruitmentData.allowReferralsType == -1 ? $t("recruit.Negotiable") : recruitmentData.allowReferralsMoney + 'RUB'}}</text>
					</view>
					<view class="underline"></view>
					<view class="content__info__detail">
						<view class="job-info">
							<text>{{ recruitmentData.companyName }}</text>
							<i class="iconfont icon-shijian job-info__icon"></i>
							<text class="job-info__time">{{ buildI18nTime(recruitmentData.createTime) }}</text>
						</view>
						<view class="job-place">
							{{ formatPlace(recruitmentData.companyAddress)  }}{{ recruitmentData.companyDetailedAddress ? `,${recruitmentData.companyDetailedAddress}` : '' }}
						</view>
					</view>
				</view>
				<view class="content__requirements">
					<view class="content__requirements__header">
						{{ $t("recruit.Requirements") }}
					</view>
					<rich-text :nodes="recruitmentData.requirements" class="content__requirements__wrapper"></rich-text>
				</view>
				<view class="content__contact">
					<view class="content__contact__wrapper">
						<image :src="recruitmentData.avatarCompress || recruitmentData.avatar || $store.state.normalPic" mode=""
							class="content__contact__wrapper__image">
						</image>
						<view class="content__contact__wrapper__name">
							<text>{{recruitmentData.userName}}</text>
							<text>{{ time() }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="bottom__btn cancle-btn" @click="getCustomer(6)"
					:style="$store.state.userId && $store.state.userId == this.recruitmentData.userId ? 'width: 100%; margin: 0 30upx;' : ''">
					{{ $t("feeServices.contactAdmin") }}
				</view>
				<view class="bottom__btn" @click="handleCreat"
					v-if="!($store.state.userId && $store.state.userId == this.recruitmentData.userId)">
					{{ $t("feeServices.applyNow") }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		recruitmentDetail
	} from '@/services/recruit.js'

	import {
		buildI18nTime
	} from "@/utils/date-util.js";

	import {
		getCurrencyList
	} from '@/services/bourse.js'

	import {
		formatPlace
	} from './index.js'


	import {
		queryCreateModuleGroup,
		queryGroupDetail
	} from "@/services/group.js";
	import {
		getDefaultColor,
		getTimeDiff
	} from "@/utils/index";
	import {
		mapActions,
		mapState
	} from "vuex";

	export default {
		name: 'RecruitmentDetail',
		data() {
			return {
				recruitmentId: '',
				recruitmentData: {},
				currencyList: []
			}
		},
		onLoad(option) {
			if (option.id) this.recruitmentId = option.id
			this.getCurrency()
			this._recruitmentDetail(this.recruitmentId)
		},
		computed: {
			...mapState(["userInfo", "token"]),
		},
		methods: {
			...mapActions(["changeGroupList"]),
			buildI18nTime,
			formatPlace,
			async handleCreat() {
				if (!this.token) {
					uni.navigateTo({
						url: "/pages/login/Login",
					});
					return
				}
				uni.showLoading()
				const {
					result
				} = await queryCreateModuleGroup({
					groupName: this.recruitmentData.userName,
					avatar: this.recruitmentData.avatar || this.$store.state.normalPic,
					avatarCompress: this.recruitmentData.avatarCompress || this.$store.state.normalPic,
					memberIds: [this.recruitmentData.userId],
					moduleType: 4,
				});
				uni.showLoading()
				if (result.code === 200) {
					var group = await this.$RongIMLib.getConversation({
						targetId: result.data,
						conversationType: 3
					})
					const resp = await queryGroupDetail(result.data)
					uni.showLoading()
					if (resp.success) {
						resp.result.data.myName = resp.result.data.jyRemark || 'OMLOOKER'
						// console.log(group, 'group')
						if (group) {
							group.data.info = resp.result.data
							var groupList = this.$store.state.groupList;
							if (!this.$store.state.moduleGroupInfo[4]) {
								this.$store.state.moduleGroupInfo[4] = [{
									groupId: result.data,
									groupName: this.recruitmentData.userName,
									moduleType: 4,
								}, ];
							} else {
								var index = this.$store.state.moduleGroupInfo[4].find(
									(o) => o.groupId == result.data
								);
								if (index == -1) {
									this.$store.state.moduleGroupInfo[4].push({
										groupId: result.data,
										groupName: this.recruitmentData.userName,
										moduleType: 4,
									});
								}
							}
							var gIndex = groupList.indexOf((o) => o.groupId == result.data);
							if (gIndex > -1) {
								groupList[gIndex] = group.data.info;
							} else {
								groupList.push(group.data.info);
							}
							await this.changeGroupList(groupList);
							console.log(this.$store.state.groupList)
							uni.hideLoading()
							//直接跳转页面
							uni.navigateTo({
								url: "/pages/chat/GroupChat?isFriendGroup=true&backType=1&isModule=true&groupId=" +
									result.data,
								fail(err) {
									console.log(err);
									uni.hideLoading()
								},
							});
						}
					}
				}
			},
			/**
			 * @param {Number} id 招聘详情id
			 */
			async _recruitmentDetail(id) {
				uni.showLoading()
				const {
					success,
					result
				} = await recruitmentDetail(id)
				uni.hideLoading()
				if (success) {
					this.recruitmentData = result.data
				}
				console.log('详情', success, result)
			},
			/**
			 * 获取系统货币
			 */
			async getCurrency() {
				const {
					success,
					result
				} = await getCurrencyList()
				if (success) {
					this.currencyList = result.data
				}
			},

			/**
			 * @param {Number} currencyId 根据货币Id 获取货币的符号
			 */
			getCoinName(currencyId) {
				const coinIndex = this.currencyList.findIndex(
					(value) => String(value.id) === String(currencyId)
				)
				return coinIndex !== -1 ? this.currencyList[coinIndex].symbol : ''
			},
			jobNatureStr(value) {
				var str = ''
				if (value === '0') {
					str = this.$t('recruit.Fulltime')
				} else if (value === '1') {
					str = this.$t('recruit.Part-time')
				}
				console.log(str)
				return str
			},
			workingModeStr(value) {
				var str = ''
				if (value === '0') {
					str = this.$t('recruit.OnSite')
				} else if (value === '1') {
					str = this.$t('recruit.OnLine')
				}
				return str
			},
			workExperienceStr(value) {
				var str = ''
				if (value === '0') {
					str = this.$t('recruit.Lessthan1year')
				} else if (value === '1') {
					str = this.$t('recruit.1-3Years')
				} else if (value === '2') {
					str = this.$t('recruit.3-5Years')
				} else if (value === '3') {
					str = this.$t('recruit.moreThan5Years')
				}
				return str
			},
			time() {
				return getTimeDiff(this.recruitmentData.lastLoginTime, 'minutes', true)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		height: calc(100vh - var(--status-bar-height));
		background-color: #61BDB2;

		.container {
			position: relative;
			box-sizing: border-box;
			height: calc(100vh - var(--status-bar-height) - 44px - 152rpx);
			margin-top: 30rpx;
			background-color: #f6f6f6;
			border-radius: 50rpx 50rpx 0px 0px;
			overflow-y: auto;


			.content {

				&>view:first-child {
					border-radius: 50rpx 50rpx 0px 0px;
					padding: 50rpx 40rpx 30rpx;
				}

				&>view {
					margin-bottom: 20rpx;
					padding: 36rpx 43rpx;
					background: #ffffff;
				}

				&__info {
					&__header {
						display: flex;
						justify-content: space-between;
						margin-bottom: 28rpx;

						&>view {
							font-size: 36rpx;
							font-weight: 500;
							color: #000000;
						}

						.deep-text {
							color: #FE6600;
							font-weight: 400;
							font-size: 36rpx;
						}

						.thin-text {
							font-size: 24rpx;
							font-weight: 400;
							color: #878787;
							margin-right: 13rpx;
						}
					}

					&__center {
						display: flex;
						justify-content: space-between;

						&>view {
							display: flex;
							align-items: center;
							font-size: 26rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #878787;
							margin-bottom: 40rpx;
						}

						.my-icon {
							font-size: 30rpx;
						}

						.place {
							margin-left: 11rpx;
						}
					}

					&__bottom {
						display: flex;
						overflow-x: auto;

						.tags-item {
							background: #EBFAF8;
							border-radius: 10rpx;
							padding: 13rpx 23rpx;
							font-size: 24rpx;
							color: #61BDB2;
							margin-right: 20rpx;
						}
					}

					&__extra {
						display: inline-block;
						padding: 0 20rpx;
						margin-top: 20rpx;
						height: 46rpx;
						line-height: 46rpx;
						background: #FFF0E5;
						border-radius: 10rpx;
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FE6600;

						.extra-icon {
							font-size: 40rpx;
							vertical-align: bottom;
							margin-right: 10rpx;
						}
					}

					.underline {
						height: 2rpx;
						background: #F6F6F6;
						margin-top: 30rpx;
					}

					&__detail {
						margin-top: 30rpx;

						.job-info {
							display: flex;
							align-items: center;
							font-size: 28rpx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							color: #000000;
							word-break: break-word;
							word-wrap: break-word;

							&__icon,
							&__time {
								font-size: 24rpx;
								font-weight: 400;
								color: #878787;
								white-space: nowrap;
							}

							&__icon {
								font-size: 30rpx;
								margin-left: auto;
								margin-right: 10rpx;
								margin-top: 2rpx;
							}
						}

						.job-place {
							margin-top: 12rpx;
							font-size: 24rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #878787;
							word-break: break-word;
							word-wrap: break-word;
						}
					}
				}

				&__contact {
					padding: 30rpx !important;
					display: flex;
					justify-content: space-between;
					align-items: center;

					&__wrapper {
						display: flex;

						&__image {
							width: 90rpx;
							height: 90rpx;
							border-radius: 50%;
						}

						&__name {
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							margin-left: 30rpx;
							font-size: 28rpx;
							color: #000000;

							&>text:last-child {
								font-size: 24rpx;
								color: #878787;
							}
						}
					}
				}

				&__requirements {
					font-family: Source Han Sans CN;
					color: #000000;
					font-weight: 400;

					&__header {
						font-size: 34rpx;
						font-weight: 500;
						margin-bottom: 30rpx;
					}

					&__wrapper {
						font-size: 26rpx;
						color: #000000;
						word-break: break-word;
						word-wrap: break-word;
					}
				}
			}

			.bottom {
				position: fixed;
				bottom: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 750rpx;
				height: 124rpx;
				background: #FFFFFF;
				box-shadow: 0px 0px 3rpx 0px rgba(0, 0, 0, 0.15);

				&__btn {
					box-sizing: border-box;
					width: 330rpx;
					height: 90rpx;
					text-align: center;
					line-height: 90rpx;
					background: #61BDB2;
					border-radius: 20rpx;
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					margin-left: 15rpx;
				}

				.cancle-btn {
					background: #FFFFFF;
					border: 2rpx solid #61BDB2;
					color: #61BDB2;
					margin-left: 0rpx;
					margin-right: 15rpx;
				}
			}

		}
	}
</style>